.el-menu-vertical-demo {
	.logo {
		span {
			color: #333;
		}
	}
}

.header-box {
	// padding: 6px 0 0 6px;
	width: 100%;
	box-sizing: border-box;
	// background-color: rgba(#fff, 1);
	background: #eee;
	height: 58px;
	padding: 0 !important;

	.handle {
		float: left;
		padding-top: 22px;
		margin-left: 4.6875rem;

		.search {
			float: left;
			width: 22px;
			height: 22px;
			margin-right: 16px;
			background: url(~@/assets/img/search.png) no-repeat;
			background-size: 22px 22px;
		}

		.full {
			float: left;
			width: 22px;
			height: 22px;
			margin-right: 16px;
			background: url(~@/assets/img/full.png) no-repeat;
			background-size: 22px 22px;
		}
	}

	.user {
		float: right;
		margin-right: 1.25rem;
		font-size: 12px;
		display: flex;
		align-items: center;

		.text {
			display: flex;
			align-items: center;
			margin-right: 16px;
			color: #8492C2 !important;

			a {
				color: #8492C2;

				&:hover {
					color: #409EFF;
				}
			}
		}

		.user-box {
			cursor: pointer;
			padding-top: 5px;

			.avatar {
				width: 40px;
				height: 40px;
				border: 2px solid transparent;
				border-radius: 50%;
				background: url(~@/assets/img/test-user-man.png) no-repeat;
				background-size: 100%;

				&:hover {
					border-color: rgba(#8492C2, .2);
				}
			}

			img {
				width: 40px;
				height: 40px;
				border: 2px solid transparent;
				border-radius: 50%;

				&:hover {
					border-color: rgba(#8492C2, .2);
				}
			}
		}
	}
}

.alick-handle {
	overflow: hidden;
	width: 100%;
	padding: 20px 0;

	.add-btn {
		float: left;
	}

	.search-item {
		float: right;
		width: 280px;
	}
}

.code-pic {
	img {
		display: block;
		height: 36px;
	}
}

.pagination-box {
	overflow: hidden;
	padding: 18px 10px 20px 0;

	.pagination {
		float: right;
	}
}

.alick-list-status {
	padding: 0 8px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	display: inline-block;
	// border: 1px solid #409EFF;
	// border-radius: 4px;
	color: #409EFF;
	// background: rgba(64, 158, 255, .1);

}

.alick-list-status.queuing,
.alick-list-status.deploying,
.alick-list-status.terminating {
	color: rgba(230, 162, 60, 1);
	// border-color: rgba(230, 162, 60, 1);
	// background-color: rgba(230, 162, 60, .1);
}

.alick-list-status.running {
	color: rgba(103, 194, 58, 1);
	// border-color: rgba(103, 194, 58, 1);
	// background-color: rgba(103, 194, 58, .1);
}

.alick-list-status.failed {
	color: rgba(245, 108, 108, 1);
	// border-color: rgba(245, 108, 108, 1);
	// background-color: rgba(245, 108, 108, .1);
}

.menu-icon1 {
	// mask-image: url(~@/assets/img/icon/menu-icon1.svg);
	content: url(~@/assets/img/icon/menu-icon1-light.svg);
	// background: url(~@/assets/img/icon/menu-icon1.svg) no-repeat center;
	// background-size: cover;
}

.menu-icon2 {
	// mask-image: url(~@/assets/img/icon/menu-icon2.svg);
	content: url(~@/assets/img/icon/menu-icon2-light.svg);
}

.menu-icon3 {
	// mask-image: url(~@/assets/img/icon/menu-icon3.svg);
	content: url(~@/assets/img/icon/menu-icon3-light.svg);
}

.menu-icon4 {
	// mask-image: url(~@/assets/img/icon/menu-icon4.svg);
	content: url(~@/assets/img/icon/menu-icon4-light.svg);
}

.menu-icon5 {
	// mask-image: url(~@/assets/img/icon/menu-icon5.svg);
	content: url(~@/assets/img/icon/menu-icon5-light.svg);
}

.menu-icon6 {
	// mask-image: url(~@/assets/img/icon/menu-icon6.svg);
	content: url(~@/assets/img/icon/menu-icon6-light.svg);
}

.menu-icon7 {
	// mask-image: url(~@/assets/img/icon/menu-icon7.svg);
	content: url(~@/assets/img/icon/menu-icon7-light.svg);
}

.menu-icon8 {
	// mask-image: url(~@/assets/img/icon/menu-icon8.svg);
	content: url(~@/assets/img/icon/menu-icon8-light.svg);
}

.menu-icon9 {
	// mask-image: url(~@/assets/img/icon/menu-icon9.svg);
	content: url(~@/assets/img/icon/menu-icon9-light.svg);
}

.menu-icon10 {
	// mask-image: url(~@/assets/img/icon/menu-icon10.svg);
	content: url(~@/assets/img/icon/menu-icon10-light.svg);
}

.menu-icon11 {
	// mask-image: url(~@/assets/img/icon/menu-icon11.svg);
	content: url(~@/assets/img/icon/menu-icon11-light.svg);
}

// .menu-icon11-1 {
// 	// mask-image: url(~@/assets/img/icon/menu-icon11.svg);
// 	content: url(~@/assets/img/icon/menu-icon11-1.svg);
// }

.menu-icon12 {
	// mask-image: url(~@/assets/img/icon/menu-icon12.svg);
	content: url(~@/assets/img/icon/menu-icon12-light.svg);
}

.menu-icon13 {
	// mask-image: url(~@/assets/img/icon/menu-icon13.svg);
	content: url(~@/assets/img/icon/menu-icon13-light.svg);
}


.el-tabs__header {
	margin: 0;
}

.nav-alike {
	overflow: hidden;
	margin-top: 16px;
	display: flex !important;
	justify-content: center;
	align-items: center;
	background: transparent;
	// background-color: #F5F5F5;
	// border-bottom: 1px solid #E4E7ED;

	.nav-alike-item {
		display: inline-block;
		min-width: 80px;
		position: relative;
		padding: 5px 10px;
		font-size: 1.125rem;
	}


	.is-active::before {
		content: "";
		width: 100%;
		height: 5px;
		background-color: #0077FF;
		display: block;
		position: absolute;
		z-index: 1;
	}

	// li {
	// 	// border-bottom: 1px solid #FFF;
	// 	padding: 0 16px;
	// 	transition: all .3s;
	// 	float: left;
	// 	// line-height: 48px;
	// 	cursor: pointer;
	// 	height: 48px;
	// 	line-height: 48px;
	// 	background: #E4E7ED;
	// 	border-radius: 4px 4px 0px 0px;
	// 	margin-right: 8px;
	// 	color: #606266;
	// 	font-size: 16px;
	// }

	.active {
		// color: #0077FF;
		// border-color: #0077FF;
		color: #0077FF;
		background: #FFF;
	}
}

.router-link-active {
	color: #333;
}

@media (max-width: 1200px) {
	.alike-lis li {
		min-width: calc(33.4% - 20px);
	}
}

@media (max-width: 767px) {
	.alike-lis li {
		min-width: calc(50% - 20px);
	}
}

@media screen and (max-width: 575px) {
	.alike-lis li {
		min-width: 100%;
	}
}

@media screen and (max-width: 433px) {
	.alike-lis li {
		min-width: 100%;
	}
}

.select-ver {
	margin-bottom: 20px;
}

.alike-lis {
	display: flex;
	flex-wrap: wrap;

	li {
		flex: 0 0 calc(25% - .625rem);
		box-sizing: border-box;
		padding: 0 8px 16px;
		// float: left;
		margin-bottom: 1.25rem;
		margin-right: .625rem;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;

		.alike-lis-box {
			background: #FFF;
			// padding-bottom: 10px;
			border-radius: 10px;
			overflow: hidden;
			max-height: 313px;

			&:hover {
				i {
					display: block;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.alike-lis-pic {
			width: 100%;
			height: 190px;
			// aspect-ratio: 4 / 3;
			cursor: pointer;
		}

		.alike-lis-word {
			position: relative;
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
			padding: 10px 14px;
			box-sizing: border-box;
			// border: 1px solid #f00;

			&>* {
				line-height: 2.5em;
			}
		}

		.alike-lis-title {
			position: relative;
			font-weight: bold;
			line-height: 24px;
			display: flex;
			font-size: .875rem !important;
			// padding: 16px 0 0 14px;
			color: #CED6E3;
			cursor: pointer;

			.name {
				max-width: 65%;
				margin-right: 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.status-tag {
				font-size: 12px;
				line-height: 1em;
				padding: 5px;

				&.danger {
					border: 1px solid #FF8D8D;
					background: rgba(#E31E1E, .26);
					color: #FF8D8D;
				}

				&.warning {
					border: 1px solid #E3D21E;
					background: rgba(#E3D21E, .31);
					color: #E3D21E;
				}

				&.success {
					border: 1px solid #B0E31E;
					background: rgba(#B0E31E, .31);
					color: #B0E31E;
				}
			}

			i {
				position: absolute;
				display: flex;
				top: 0;
				// right: 14px;
				right: 0;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				cursor: pointer;
				display: none;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: #202337;
			}
		}


		.alike-lis-type {
			// padding: 4px 14px 0;
		}

		.alike-lis-hint {
			// color: #8F9299;
			// height: 36px;
			// padding: 4px 14px 0;
			color: #A4ADCD;
			font-size: 12px;
			height: 2em;

			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.alike-lis-user {
			// padding: 5px 10px 0;
			font-size: 12px;
			color: #A4ADCD;

			img {
				// width: 18px;
				width: 14px;
				float: left;
			}

			.user-name {
				// line-height: 18px;
				font-size: 12px;
			}

			.date {
				// line-height: 18px;
				float: right;
			}
		}
	}
}


// .search-box {
//   overflow: hidden;
//   // width: 400px;
//   // position: absolute;
//   // right: 16px;
//   // top: 58px;
//   float: right;
//   // margin-bottom: 20px;

//   .search {
//     float: left;
//     width: 280px;
//   }

//   .add {
//     float: left;
//     width: 110px;
//     box-sizing: border-box;
//     padding-left: 18px;
//     height: 36px;
//     background: #7872F6;
//     border-radius: 4px;
//     margin-left: 10px;
//     line-height: 36px;
//     color: #FFF;

//     &::before {
//       margin-right: 4px;
//     }

//     &:hover {
//       opacity: 0.8;
//     }
//   }
// }

.alike-lis-header {
	display: flex;
	justify-content: space-between;
	margin: 0 0 9px;

	.lis-header-left {
		display: flex;
		align-items: center;
	}

	.add-btn {
		border: 1px solid #64B121;
		background: rgba(#64B121, .6);
		border-radius: 2px;
		color: #fff;
		font-size: 12px;
		display: inline-block;
		min-width: 56px;
		padding: 0 4px;
		line-height: 28px;
		text-align: center;
		margin-right: 10px;
		cursor: pointer;
	}

	.search-box {
		.el-input__prefix {
			top: -6px;
			left: 0;
			font-size: 20px;
			color: #47547C;
		}

		.el-input__inner {
			height: 28px;
			line-height: 28px;
			border: 0 !important;
			background: transparent !important;
			border-bottom: 1px solid #47547C !important;
			border-radius: 0;
		}
	}


}

.btns-switch {
	width: 100px;
	display: flex;
	border-radius: 4px;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
	}

	div {
		width: 40px;
		height: 28px;
		cursor: pointer;
	}

	.btn {
		width: 40px;
		height: 20px;
		line-height: 20px;
		padding: 5px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		background: #808080;
		cursor: pointer;
	}

	.is-active {
		background: rgba(#808080, .5) !important;
	}
}


.alike-lis-handle {
	padding-left: 26px;
	line-height: 36px;
	display: block;
	color: #4285F4;

	&:hover {
		background: #F5F7FA;
	}
}

.radio_box {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 20px;

	:deep(.el-radio-group) {
		.el-radio-button__inner {
			font-size: 15px;
			width: 120px !important;
			height: 40px;
			color: rgba(132, 146, 194, 1) !important;
			background: rgba(17, 21, 24, 1);
			border: 1px solid rgba(132, 146, 194, 1) !important;
		}

		/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
			background: rgba(132, 146, 194, 1) !important;
			color: rgba(255, 255, 255, 1) !important;
			border: 1px solid rgba(132, 146, 194, 1) !important;
		}
	}
}

:deep(.el-radio-group) {
	.el-radio-button__inner {
		font-size: 15px;
		width: 120px !important;
		height: 40px;
		color: rgba(132, 146, 194, 1) !important;
		background: rgba(17, 21, 24, 1);
		border: 1px solid rgba(132, 146, 194, 1) !important;
	}

	/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
		background: rgba(132, 146, 194, 1) !important;
		color: rgba(255, 255, 255, 1) !important;
		border: 1px solid rgba(132, 146, 194, 1) !important;
	}
}

.pagination-box {
	overflow: hidden;
	padding: 18px 10px 20px 0;

	.pagination {
		float: right;
		display: flex;
	}

	.el-pager {

		li {
			border: 1px solid rgba(#fff, .2);
		}

		.active {
			background: #177DDC !important;
			border: 1px solid #177DDC;
		}
	}

	.btn-prev,
	.btn-next {
		border: 1px solid #177DDC;

		i {
			color: #177DDC;
		}
	}

	.el-pagination__jump {
		display: flex !important;
		align-items: center !important;
	}
}

// @media screen and (min-width:2000px) {
// 	.alike-lis {
// 		li {
// 			width: 20%;
// 		}
// 	}
// }

// @media screen and (min-width:2300px) {
// 	.alike-lis {
// 		li {
// 			width: 16.66%;
// 		}
// 	}
// }

// @media screen and (min-width:2600px) {
// 	.alike-lis {
// 		li {
// 			width: 14.28%;
// 		}
// 	}
// }

// @media screen and (min-width:2900px) {
// 	.alike-lis {
// 		li {
// 			width: 12.25%;
// 		}
// 	}
// }

// @media screen and (min-width:3100px) {
// 	.alike-lis {
// 		li {
// 			width: 10%;
// 		}
// 	}
// }

// @media screen and (min-width:3400px) {
// 	.alike-lis {
// 		li {
// 			width: 9.09%;
// 		}
// 	}
// }

// @media screen and (min-width:3700px) {
// 	.alike-lis {
// 		li {
// 			width: 8.33%;
// 		}
// 	}
// }

// @media screen and (min-width:4000px) {
// 	.alike-lis {
// 		li {
// 			width: 7.68%;
// 		}
// 	}
// }

// @media screen and (min-width:4300px) {
// 	.alike-lis {
// 		li {
// 			width: 7.14%;
// 		}
// 	}
// }

// @media screen and (min-width:4600px) {
// 	.alike-lis {
// 		li {
// 			width: 6.66%;
// 		}
// 	}
// }

// @media screen and (min-width:4900px) {
// 	.alike-lis {
// 		li {
// 			width: 6.25%;
// 		}
// 	}
// }

.code-desc-header {
	.title {
		min-width: 130px;
	}

	.code-status {
		min-width: 22.5rem;
	}
}

.my-steps {
	height: 64px;
	box-sizing: border-box;

	.el-step__head {
		margin-top: 10px;
	}
}

.myself-table {
	margin-top: 20px;
}

.myself-form {
	max-width: 864px;
}

#app .myself-steps {
	padding-left: 100px;
	max-width: 760px;
	background: rgba(0, 0, 0, 0);
	height: 40px;

	.el-step.is-simple {
		overflow: hidden;
	}

	.el-step__head {
		margin-top: 6px;
	}

	.el-step__arrow {
		// padding: 0 20px;
		margin: 0 20px;
		position: relative;

		&::before {
			display: none;
		}

		&::after {
			transform: rotate(0deg);
			width: 100%;
			height: 1px;
			background: #ccc;
			box-sizing: border-box;
			// margin: 0 20px;
		}
	}

	.el-step__title.is-success {
		color: #0077FF;
	}

	.el-step__head.is-success {
		color: #0077FF;
		border-color: #0077FF;

		.is-status {
			color: #0077FF;
		}
	}

}


.table-layout {
	background: #FFF;
	// padding: 6px 16px;
}

.row-btns-item {
	margin-right: 10px;
	display: inline-block;
}

.row-btns-item:last-child {
	margin-right: 0;
}

.has-ver-table-layout {
	padding-right: 16px;
}

.full-extent-select {
	width: 100%;
}

.page-title {
	line-height: 24px;
	color: #3D3D3D;
	font-size: 18px;
	font-weight: bold;
	padding: 4px 2px;
}

.tabs-box {
	// margin: 1.25rem 0 .625rem;
}

// .alike-search-header {
// 	justify-content: space-between;
// 	width: 100%;
// 	overflow: hidden;


// }



.has-vers-lis {
	margin-top: 4px;
	width: 100%;

	li {
		margin-bottom: 6px;
		border-radius: 8px;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		background: #FFF;
	}

	.lis-header {
		display: flex;
		width: 100%;
		height: 48px;
		background: #F2F6FC;
		justify-content: space-between;

		.lis-header-name {
			padding-left: 24px;
			line-height: 48px;

			cursor: pointer;

			strong {
				padding-right: 20px;
				width: 550px;
				box-sizing: border-box;
				float: left;
				line-height: 48px;
				font-size: 16px;
			}

			span {
				float: left;
				line-height: 48px;
				color: #606266;

				b {
					margin-right: 20px;
					font-weight: normal;
				}
			}
		}
	}

	.ver-table {
		padding: 0 20px 10px;
		width: 100%;
		background-color: #FFF;
		box-sizing: border-box;
	}

	.header-style {
		.cell {
			color: #8F9299;
			font-weight: normal;
		}
	}
}

.handle-btn-hollow {
	float: left;
	height: 24px;
	background: rgba(120, 114, 246, 0.1);
	border-radius: 4px 4px 4px 4px;
	border: 1px solid #7872F6;
	margin: 12px 8px 0 0;
	padding: 0 12px;
	font-size: 12px;
	line-height: 24px;

	&:hover {
		opacity: .8;
	}
}

.detail-layout {
	background: #FFF;
	padding: 0 20px 20px 0;
	overflow: hidden;
}

.add-alike-title {
	margin-left: 24px;
	line-height: 24px;
	font-size: 16px;
	border-bottom: 1px solid #DCDFE6;
	margin-bottom: 20px;
	padding: 6px 0;
}

.alick-layout-status {
	margin-left: 4px;
	// font-weight: normal;
}

.alick-layout-status.queuing {
	color: #E6A23C;
}

.alick-layout-status.deploying {
	color: #E6A23C;
}

.alick-layout-status.running {
	color: #67C23A;
}

// .alick-layout-status.terminating {
// 	color: ;
// }
.alick-layout-status.failed {
	color: #F56C6C;
}

.alick-list-status {
	padding: 0 8px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	display: inline-block;
	// border: 1px solid #409EFF;
	// border-radius: 4px;
	color: #409EFF;
	// background: rgba(64, 158, 255, .1);
	display: flex;
	align-items: center;
	justify-content: center;

	* {
		margin-right: 5px;
	}
}

.alick-list-status.queuing,
.alick-list-status.deploying,
.alick-list-status.terminating {
	color: rgba(230, 162, 60, 1);
	// border-color: rgba(230, 162, 60, 1);
	// background-color: rgba(230, 162, 60, .1);
}

.alick-list-status.running {
	color: rgba(35, 187, 93, 1);
	// border-color: rgba(103, 194, 58, 1);
	// background-color: rgba(103, 194, 58, .1);
}

.alick-list-status.failed {
	color: rgba(245, 108, 108, 1);
	// border-color: rgba(245, 108, 108, 1);
	// background-color: rgba(245, 108, 108, .1);
}

.layout-top {
	display: flex;
	justify-content: space-between;

	.rollback {
		position: absolute;
		top: 11px;
		left: 20px;
		color: #8492C2;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		cursor: pointer;

		img {
			width: 14px;
			mask-repeat: no-repeat;
			mask-size: 14px;
			mask-position: center;
			mask-image: url(~@/assets/img/prev.png);
			background: #8492C2;
			color: #8492C2;
		}
	}

	.code-description {
		flex-grow: 4;
	}

	.code-status {
		flex-grow: 20;
		min-width: 300px;
	}


	.btns-container {
		flex-grow: 1;
		min-width: 18.125rem;
	}
}

.btns-container {
	// margin: 10px 0;
}

.alick-handle-btns {
	// position: absolute;
	// right: 18px;
	// bottom: 12px;
	float: right;

	.handle-btn {
		// min-width: 55px;
		// height: 28px;
		// line-height: 28px;
		// font-size: 12px;
		// // background: rgba(120,114,246,0.1);
		// // background: #7872F6;
		// border-radius: 4px;
		// // border: 1px solid #7872F6;
		// margin-left: 8px;
		// float: left;
		// padding: 0 12px;
		// text-align: center;
		// color: #FFF;
		margin: 0 5px 10px;

	}

	&:first-child .handle-btn {
		margin-left: 0;
	}

}

// .el-dropdown-link {
// 	border: 1px solid rgba(#808080, .5);
// 	padding: 5px 10px;
// 	border-radius: 10px;
// 	position: relative;
// 	padding-left: 28px;
// 	background: #eee;
// 	top: 3px;

// 	span::before {
// 		content: "";
// 		width: 16px;
// 		height: 16px;
// 		background: url(~@/assets/img/branch.png) no-repeat center;
// 		background-size: cover;
// 		margin-top: 3px;
// 		position: absolute;
// 		left: 6px;
// 		top: 4px;
// 	}
// }

.version-list {
	padding: .625rem 0;

	.version-item {
		line-height: 2em;
		padding: .625rem 1.25rem;
		border-bottom: 1px solid #eee;
		cursor: pointer;

		&:hover {
			background: #eee;
		}

		p {
			display: flex;
			justify-content: space-between;
			padding: .3125rem 0;
		}

		.title {
			font-size: 20px;
		}

		.commit {
			color: #808080;
			display: -webkit-inline-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			white-space: normal;
			width: 90%;
		}
	}
}

.alick-popover-handle-btns {
	// padding: 10px 0 0 0;
	display: flex;
	flex-direction: column;
	// justify-content: center;
	// align-items: center;

	.handle-btn {
		margin-bottom: 10px;
		min-width: 55px;
		height: 28px;
		line-height: 28px;
		font-size: 12px;
		// background: rgba(120,114,246,0.1);
		background: #7872F6;
		border-radius: 4px;
		// border: 1px solid #7872F6;
		// margin-left: 8px;
		display: block;
		padding: 0 12px;
		text-align: center;
		color: #FFF;
		// margin: 0 0 10px 0;
	}

	.handle-btn:nth-child(2) {
		margin-left: 0;
	}
}

.alick-add-form {
	max-width: 800px;
}

.right-btn-box {
	display: block;
	width: 100%;
	overflow: hidden;
	padding-bottom: 10px;

	.outin-handle {
		float: right;
	}
}


.port-lis {
	display: flex;
	width: calc(100% - 24px);
	// padding-top: 10px;

	.port-el-input {
		flex: 1;
		margin-left: 10px;
		box-sizing: border-box;
	}

	.port-lis-radio {
		padding-top: 4px;
		width: 160px;
	}
}

.alike-lis-both {
	width: 100%;

	ul {
		width: calc(100% + 20px);
		margin: 0 -10px;
	}

	.lis-both-item {
		width: calc(50% - 20px);
		margin: 20px 10px 0;
		background: #FFF;
		float: left;
		height: 150px;
		display: flex;
		border-radius: 4px;
		cursor: pointer;

		.dimg {
			width: 200px;
			height: 150px;
		}

		.word-box {
			padding: 0 20px;
			overflow: hidden;
			flex: 1;
			position: relative;
		}

		.title {
			padding-top: 20px;
			height: 40px;
			line-height: 40px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-weight: bold;
		}

		.hint {
			display: -webkit-box;
			display: -moz-box;
			white-space: pre-wrap;
			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			margin-top: 15px;
			max-height: 45px;
		}

		.status-box {
			margin-left: -8px;

			.count-ran-time {
				display: inline-block;
				margin-left: 20px;
				font-size: 12px;
			}
		}

		.delete-btn {
			position: absolute;
			right: 10px;
			top: 10px;
			width: 24px;
			height: 24px;
			font-size: 20px;
			cursor: pointer;
			color: #999;
		}
	}
}

.alick-btn-edit {
	margin-left: 8px;
	cursor: pointer;
}


.desc-container {
	position: relative;
	margin: .625rem 0;

	.text {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 4;
	}

	.toggle-button {
		position: absolute;
		bottom: -1.875rem;
		right: .625rem;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		margin: 0;
		text-decoration: underline;
	}
}

.el-breadcrumb {
	.el-breadcrumb__item .el-breadcrumb__inner {
		color: #333;
		font-size: 1.125rem;
	}
}

.tabs-box {
	.el-tabs__nav-wrap {
		// background-color: transparent;
		// padding-bottom: 10px;

		&::after {
			//height: 0 !important;
			height: 1px !important;
			background: rgba(78, 87, 118, 1) !important;
		}

		.el-tabs__nav-scroll {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10px;
			// border-bottom: 1px solid rgba(#808080, .2);

			.el-tabs__nav {
				border: 0 !important;

				* {
					border: 0 !important;
				}
			}

			.el-tabs__item {
				color: rgba(164, 173, 205, 1) !important;
				min-width: 8.125rem;
				font-size: 1.1875rem;
				line-height: 3.125rem;
				text-align: center;
				padding: 0;
			}

			.el-tabs__nav-scroll {
				padding: 0 15px;
			}

			//.el-tabs__nav-scroll {
			//  display: flex;
			//  flex-direction: column;
			//  align-items: center;
			//  justify-content: space-between;
			//  padding-bottom: 10px;
			//  // border-bottom: 1px solid rgba(#808080, .2);
			//
			//  .el-tabs__nav {
			//    border: 0 !important;
			//
			//    * {
			//      border: 0 !important;
			//    }
			//  }
			//
			//  .el-tabs__item {
			//    min-width: 8.125rem;
			//    font-size: 1.1875rem;
			//    line-height: 3.125rem;
			//    text-align: center;
			//    padding: 0;
			//  }

			.el-tabs__item {
				font-size: 16px;
			}

			.is-active {
				color: #0077FF;
				border: 0 !important;
				height: .3125rem;
				background-color: #0077FF;
				top: 0;
			}

			.el-tabs__active-bar {
				width: 8.125rem !important;
				height: .3125rem;
				background-color: #0077FF;
				top: 0;
			}
		}
	}

	.is-active {
		color: rgba(1, 154, 255, 1) !important;

	}

	//
	//  .el-tabs__active-bar {
	//    width: 8.125rem !important;
	//    height: .3125rem;
	//    background-color: #0077FF;
	//    top: 0;
	//  }
	//}
}

.tabs-two {
	.el-tabs__item {
		min-width: 6.25rem !important;
		font-size: 1rem !important;
	}

	.is-active {
		height: .1875rem;
	}

	.el-tabs__active-bar {
		height: 0 !important;
		width: 6.25rem !important;
	}
}

.el-textarea * {
	cursor: pointer !important;
	width: 100%;
}

.el-table {
	.has-gutter {
		th.is-leaf {
			padding: 0;
			line-height: 45px;
		}
	}

	.el-table__row {
		td:first-child {
			padding-left: 10px;
		}

		td:last-child {
			padding-right: 10px;
		}
	}

	.el-table__row th,
	.el-table__row td,
	.el-table__row .cell {
		padding: 0;
		line-height: 45px;
	}

	.cell {
		display: flex;

		i.delete-btn {
			margin-right: 3px;
		}
	}

	.cell .desc,
	.cell .el-popover__reference {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

.el-table__body-wrapper {
	td .el-button--text {
		margin: 0 5px;

		* {
			display: flex;
			align-items: center;
		}
	}
}

.menu {
	z-index: 9999;
}

.el-menu {
	z-index: 9999;

	.is-active {
		background: #409EFF;

		* {
			color: #fff !important;
		}
	}
}

.el-checkbox {
	display: flex;
	align-items: center;
	margin-top: 8px;

	.el-checkbox__inner {
		margin-top: 0 !important;
	}
}

.el-breadcrumb__item {
	.el-breadcrumb__inner {
		font-size: 16px !important;
	}

	&:nth-child(1) .el-breadcrumb__inner {
		color: #A4ADCD !important;
		font-size: 14px !important;
	}

	.el-breadcrumb__separator {
		color: #A4ADCD !important;
	}
}

.commit-info {
	margin: 10px 0 20px;
}

.header-box {
	// padding: 6px 0 0 6px;
	width: 100%;
	box-sizing: border-box;
	// background-color: rgba(#fff, 1);
	background: #eee;
	height: 58px;
	padding: 0 !important;

	.handle {
		float: left;
		padding-top: 22px;
		margin-left: 4.6875rem;

		.search {
			float: left;
			width: 22px;
			height: 22px;
			margin-right: 16px;
			background: url(~@/assets/img/search.png) no-repeat;
			background-size: 22px 22px;
		}

		.full {
			float: left;
			width: 22px;
			height: 22px;
			margin-right: 16px;
			background: url(~@/assets/img/full.png) no-repeat;
			background-size: 22px 22px;
		}
	}

	.user {
		float: right;
		margin-right: 1.25rem;
		font-size: 12px;
		display: flex;
		align-items: center;

		.text {
			display: flex;
			align-items: center;
			margin-right: 16px;
			color: #8492C2 !important;

			a {
				color: #8492C2;

				&:hover {
					color: #409EFF;
				}
			}
		}

		.user-box {
			cursor: pointer;
			padding-top: 5px;

			.avatar {
				width: 40px;
				height: 40px;
				border: 2px solid transparent;
				border-radius: 50%;
				background: url(~@/assets/img/user-avatar.svg) no-repeat;
				background-size: 100%;

				&:hover {
					border-color: rgba(#8492C2, .2);
				}
			}

			img {
				width: 40px;
				height: 40px;
				border: 2px solid transparent;
				border-radius: 50%;

				&:hover {
					border-color: rgba(#8492C2, .2);
				}
			}
		}
	}
}

.avatar {
	width: 20px;
	height: 20px;
	border: 2px solid transparent;
	border-radius: 50%;
	background: url(~@/assets/img/user-avatar.svg) no-repeat;
	background-size: 100%;
	float: left;
}

.drawer-box {
	background: #242730;
	box-shadow: 5px 0 10px rgba(#000, .1);

	.infinite-list {
		// background: #242730 !important;

		.utils {
			padding: 5px;
		}

		.infinite-item {
			border-bottom: 1px solid #333;
		}

		.infinite-item.is-active {
			background: #5A658E;

			.title {
				color: #333 !important;
			}

			.desc {
				color: #808080 !important;
			}
		}

		.title {
			color: #333 !important;
		}

		.desc {
			color: #808080 !important;
		}
	}
}


.el-checkbox__input {
	.el-checkbox__inner {
		width: 15px;
		height: 15px;
		background: transparent;
		border-width: 2px;
		margin-top: 10px;
	}
}